<html>
<head>
<script type="text/javascript">
var index = 2;
//var choice_limit = 0;
var max_choice_limit = 0;
function validate_title(){
	question = document.getElementById("question_body").value;
	//alert(question.length);
	if (question.length == 0 || question == null){
		alert("Your question has no body.");
		return false;
	}
	else{
		return true;
	}
}
function add_textbox(){
	//var index = document.getElementById("options")
	if (max_choice_limit == 0){
	
	}
	else{
		max_choice_limit++;
	}
	var myString = "";
	index++;
	tester = "";
	//alert(index);
	value = 0;
	for(i = 0; i < index; i++){
		//alert(i);
		value = i+1;
		search = "choice"+value;
		//alert(search);
		if (i == index-1){
			tester = "";
		}
		else{
			tester = document.getElementById(search).value;
			//alert("tester");
		}
		
		//alert(tester);
		myString += "Choice "+value+" <input id= 'choice"+value+ "' type='text' name='choice"+value+"' value="+tester+">"+"<br>";
		//alert(myString);
	}
	limit_string = "";
	for(i = 0; i < max_choice_limit; i++){
		value = i+1;
		limit_string += "<option value="+value+">"+value+"</option>";
	}
	if (max_choice_limit == 0){
		
	}
	else{
		//alert("wtf");
		//document.getElementById("limit").innerHTML = "";
		document.getElementById("limit").innerHTML = "<select name='choice_limit'>"+limit_string+"</select>";	
	}
	


	
	document.getElementById("options").innerHTML = myString;
	//document.getElementById("options").innerHTML += "Choice "+index+" <input type='text' name='choice"+index+"'>"+"<br>";
	
	document.getElementById("choices").innerHTML = "<input type='hidden' name='choice_value' value="+index+">";
}
function delete_textbox(){
	var myString = "";
	//alert("wooot");
	if (max_choice_limit == 0){
		//alert("wooot");
	}
	else{
		max_choice_limit--;
	}
	index--;
	if (index == 1){
		// must be atleast 2 choices
		index++;
		if (max_choice_limit != 0){
			max_choice_limit++;
		}
		
	}



	
	for(i = 0; i < index; i++){
		value = i+1;
		search = "choice"+value;
		/*
		if (i == index-1){
			tester = "";
		}
		else{
			tester = document.getElementById(search).value;
		}*/
		tester = document.getElementById(search).value;
		//myString += "Choice "+value+" <input id='choice' type='text' name='choice"+value+"'>"+"<br>";
		myString += "Choice "+value+" <input id= 'choice"+value+ "' type='text' name='choice"+value+"' value="+tester+">"+"<br>";
	}
	
	limit_string = "";
	for(i = 0; i < max_choice_limit; i++){
		value = i+1;
		limit_string += "<option value="+value+">"+value+"</option>";
	}
	if (max_choice_limit == 0){
		
	}
	else{
		//alert("wtf");
		//document.getElementById("limit").innerHTML = "";
		document.getElementById("limit").innerHTML = "<select name='choice_limit'>"+limit_string+"</select>";	
	}	
	
	
	document.getElementById("options").innerHTML = myString;
	//document.getElementById("options").innerHTML += "Choice "+index+" <input type='text' name='choice"+index+"'>"+"<br>";
	//index--;
	document.getElementById("choices").innerHTML = "<input type='hidden' name='choice_value' value="+index+">";			
	

}

function detect(){
	var e = document.getElementById("selectedtype");
	var choice = e.options[e.selectedIndex].value;
	//choice_limit = 0;
	max_choice_limit = 0;
	if (choice == "text"){
		document.getElementById("limit").innerHTML = "";
		document.getElementById("options").innerHTML = "";
		document.getElementById("buttons").innerHTML = "";
		document.getElementById("del_buttons").innerHTML = "";
		document.getElementById("options").innerHTML = "Required type <select name= 'required'>"
		+"<option value='1'>integer</option>"
		+"<option value='0'>text</option>"
		+"</select>";
		document.getElementById("choices").innerHTML = "<input type='hidden' name='choice_value' value='0'>";
	}
	else if (choice == "paragraph text"){
		//text area instead
		//alert(choice);
		document.getElementById("limit").innerHTML = "";
		document.getElementById("options").innerHTML = "";
		document.getElementById("buttons").innerHTML = "";
		document.getElementById("del_buttons").innerHTML = "";
		document.getElementById("choices").innerHTML = "<input type='hidden' name='choices' value='0'>";
	}
	else if (choice == "multiple choice"){
		document.getElementById("limit").innerHTML = "";
		document.getElementById("options").innerHTML = "Choice 1 <input id='choice1' type='text' name='choice1' >"+"<br>";
		document.getElementById("options").innerHTML += "Choice 2 <input id='choice2' type='text' name='choice2' > "+"<br>";
		document.getElementById("buttons").innerHTML = "<button type='button' onclick='add_textbox()'>Add another </button>";
		document.getElementById("del_buttons").innerHTML = "<button type='button' onclick='delete_textbox()'>Delete Choice </button>";
		document.getElementById("choices").innerHTML = "<input type='hidden' name='choice_value' value='2'>";
		index = 2;
	}
	else if (choice == "checkboxes"){
		//choice_limit = 2;
		max_choice_limit = 2;
		limit_string = "";
		//check box
		//alert(choice);
		for(i = 0; i < max_choice_limit; i++){
			value = i+1;
			limit_string += "<option value="+value+">"+value+"</option>";
		}
		document.getElementById("limit").innerHTML = "<select name='choice_limit'>"+limit_string+"</select>";
		document.getElementById("options").innerHTML = "Choice 1 <input id='choice1' type='text' name='choice1' >"+"<br>";
		document.getElementById("options").innerHTML += "Choice 2 <input id='choice2' type='text' name='choice2' > "+"<br>";
		document.getElementById("buttons").innerHTML = "<button type='button' onclick='add_textbox()'>Add another </button>";
		document.getElementById("del_buttons").innerHTML = "<button type='button' onclick='delete_textbox()'>Delete Choice </button>";
		document.getElementById("choices").innerHTML = "<input type='hidden' name='choice_value' value='2'>";
		index = 2;
		//document.getElementById("options").innerHTML += "Gender <input type='checkbox' name='gender' value='male'>";
	}
	else if (choice == "choose"){
		//drop down
		//alert(choice);
		document.getElementById("limit").innerHTML = "";
		document.getElementById("options").innerHTML = "Choice 1 <input id ='choice1' type='text' name='choice1' >"+"<br>";
		document.getElementById("options").innerHTML += "Choice 2 <input id='choice2' type='text' name='choice2' > "+"<br>";
		document.getElementById("buttons").innerHTML = "<button type='button' onclick='add_textbox()'>Add another </button>";
		document.getElementById("del_buttons").innerHTML = "<button type='button' onclick='delete_textbox()'>Delete Choice </button>";
		document.getElementById("choices").innerHTML = "<input type='hidden' name='choice_value' value='2'>";
		index = 2;
	}
	else if (choice == "scale"){
		//agree disagree basically in essence
		//alert(choice);
		document.getElementById("limit").innerHTML = "";
		document.getElementById("options").innerHTML = "Choice 1 <input type='text' name='choice1' >"+"<br>";
		document.getElementById("options").innerHTML += "Choice 2 <input type='text' name='choice2' > "+"<br>";
		document.getElementById("buttons").innerHTML = "";
		document.getElementById("del_buttons").innerHTML = "";
		document.getElementById("choices").innerHTML = "<input type='hidden' name='choice_value' value='2'>";
	}
	else if (choice == "ranking"){
		//ranking
		//alert(choice);
		document.getElementById("limit").innerHTML = "";
		document.getElementById("options").innerHTML = "Choice 1 <input id='choice1' type='text' name='choice1' >"+"<br>";
		document.getElementById("options").innerHTML += "Choice 2 <input id='choice2' type='text' name='choice2' > "+"<br>";
		document.getElementById("buttons").innerHTML = "<button type='button' onclick='add_textbox()'>Add another </button>";
		document.getElementById("del_buttons").innerHTML = "<button type='button' onclick='delete_textbox()'>Delete Choice </button>";
		document.getElementById("choices").innerHTML = "<input type='hidden' name='choice_value' value='2'>";
		index = 2;
	}
	//document.write("<input type='hidden' name='len' value='6'>");
}


</script>
<title></title>
</head>
<body>
<form method="POST" action='http://localhost/pollwatcher/index.php/user/insert_question/<?php echo $survey_id."/";?>' onsubmit="return validate_title()">
<?php 
//echo form_open('user/insert_question/'.$survey_id.'/');?>
Question:
<br />
<textarea id="question_body" name="question" cols="40" rows="3" >Question here</textarea>
<br/>

<div id="selectedtypeDiv">
Question type:
<select name = "type" id="selectedtype" onchange= "detect()">
<?php
	foreach($type as $value1)
	{
		foreach($value1 as $value)
		{
			if ($value == "text"){
			}
			else{
				echo "<option value=\"$value\">$value</option>";
			}
		}
		
	}
	echo "<option value=\"text\">text</option>";
?>
</select>
</div>

<div id="required"></div>
<div id ="options"></div>
<div id ="buttons"></div>
<div id ="del_buttons"></div>
Possible answers <div id="limit"></div>
<div id = "choice_limit_div">
<!--Possible Answers: <input type = "text" id= "choice_limit" name="choice_limit" value="1"><br/>-->
</div>
<field id="text_field_option"> 
<input type = "checkbox" id= "with_text" name="with_text" value="1"> With Text Field </field><br/>
<div id="text_options">
	Text Field label: <input type = "text" name="text_label"><br/>
	Required Type for text: <select name= 'required'>
		<option value='1'>integer</option>
		<option value='0'>text</option>
		</select>
</div>

<div id="text_options_Text">
	Text Field label: <input type = "text" name="text_label2">
</div>
<input type = "checkbox" name="null" checked="true" value="1"> Make this a required question<br/>
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
       $("#text_options").css("display","none");
       $("#text_options_Text").css("display","none");
       $("#choice_limit_div").css("display","none");
       $("#selectedtype").change(function(){
       	if($("#selectedtype").val() == "checkboxes")
       	{
       		$("#choice_limit_div").show("fast");
       	}
       	
       	else
       	{
       		$("#choice_limit_div").hide("fast");
       	}
       });
       
       $("#with_text").click(function(){       
        if ($("#with_text").is(":checked"))
        {	
        	if($("#selectedtype").val() == "text")
        	{
				$("#text_options_Text").show("fast");        	
        	}
        	else
        	{
            	$("#text_options").show("fast");        	
        	}
            
        }
        else
        {      
            $("#text_options").hide("fast");
        	$("#text_options_Text").hide("fast");
        }
      });
    
    });
</script>
<script type="text/javascript">
function getSelectedValue(){
	document.getElementById("selectedtype") //where "selectid" is the ID of the SELECT element on the page
	document.write(document.getElementById("selectedtype"));
}
</script>
<br/>
<?php
	if($has_groups){
		echo "Belongs to ";
		echo "<select name='groups'>";
		foreach($categories->result() as $row){
			$category = $row->category_name;
			echo "<option value=\"$category\">";
			echo $category;
			echo "</option>";
		}
		echo "</select>";
	}
	else{
	}
?>

<div id ="choices"><input type="hidden" name='choice_value' value="0"></div>
<input type="submit" name="submit" value="Add"/>

<?php
	echo form_close();
?>

<link  href="http://localhost/pollwatcher/public/css/tipsy.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="http://localhost/pollwatcher/public/css/tipsy.css" type="text/css" media="screen" />
<script src="<?php echo base_url(); ?>public/js/jquery.js"></script>
<script src="<?php echo base_url(); ?>public/js/jquery.tipsy.js"></script>


<script type='text/javascript'> 
    $(document).ready(function() {
    	$('#selectedtype').attr('title', 'A question type wherein the respondent inputs his answer using a textarea.');
		$('#selectedtype').tipsy({trigger: 'focus', gravity: 'w'});
		$('#text_field_option').attr('title', 'An optional text input which may be used to get other answers or explanation.');
		$('#text_field_option').tipsy({gravity: 'w'});
    });
    
    $('#selectedtype').change(function(){
    	if($('#selectedtype').val() == "paragraph text")
    	{
    		$('#selectedtype').attr('title', 'A question type wherein the respondent inputs his answer in a textarea.');
    	}
    	else if($('#selectedtype').val() == "multiple choice")
    	{
    		$('#selectedtype').attr('title', 'A question type wherein there are multiple choices with one answer. The respondent selects the answer by ticking the corresponding radio button.');
     	}
     	else if($('#selectedtype').val() == "choose")
    	{
    		$('#selectedtype').attr('title', 'A question type wherein there are multiple choices with one answer. The respondent selects the answer by selecting an option from a dropdown.');
     	}
     	else if($('#selectedtype').val() == "text")
    	{
    		$('#selectedtype').attr('title', 'A question type wherein the respondent inputs his answer in a textbox.');
     	}
     	else if($('#selectedtype').val() == "scale")
    	{
    		$('#selectedtype').attr('title', 'A question type wherein the respondent selects a corresponding rate, from 1-5, by ticking the corresponding radio button.');
     	}
     	else if($('#selectedtype').val() == "ranking")
    	{
    		$('#selectedtype').attr('title', 'A question type wherein the respondent ranks the options using a drag-and-drop interface.');
     	}
     	else if($('#selectedtype').val() == "checkboxes")
    	{
    		$('#selectedtype').attr('title', 'A question type wherein there are multiple choices possibly multiple answers. The respondent selects answers by ticking the corresponding checkboxes.');
     	}
    	});
    
  </script> 


</body>
</html>
